<template>
  <div class="tabbapp">
  <div class="heacol left">
    <div></div>
  </div>
  <div class="heacol right">
    <div></div>
  </div>
  <el-table
    :data="tableData"
    :header-cell-style="{
                background: '#D8DBE2',
                color:'#000',
                fontSize: '14px',
	              fontWeight: 'normal',
              }"
    style="width: 100%"
  >
      <el-table-column
      v-for="(item, idx) in columnData"
      :key="idx"
       align="center"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
    />
    
    <el-table-column label="状态" align="center" width="100">
      <template #default="scope">
        <p v-if="scope.row.flag" style="color: #1ba9ba;">
          <img  @click="setflag(scope.row)"
        src="@/assets/Icons/png/开关/启用.png"
        alt="">启用
      </p>
      <p v-else style="color:#6b6b80;">
        <img @click="setflag(scope.row)" 
        src="@/assets/Icons/png/开关/停用.png" 
        alt="">停用
      </p>
        
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.flag">
          <el-tooltip
        class="box-item"
        effect="dark"
        content="编辑"
        placement="bottom"
        >
        <img src="@/assets/Icons/png/编辑.png" 
        alt="" 
        class="editdelete " @click="edit(scope.row)">
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="删除"
        placement="bottom"
        >
        <img src="@/assets/Icons/png/Del.png" 
        alt="" 
        class="editdelete" @click="deletedata(scope.row)">
      </el-tooltip>
        </span>
        
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script lang="ts" setup>

interface User {
  id:number
  date: string
  name: string
  address: string
}
const props = withDefaults(
  defineProps<{
    tableData?: any;
    columnData?: any;
  }>(),
  {
    tableData: [
      {
        id:1,
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
        flag: true
      },
      {
        id:2,
        date: "2016-05-03",
        name: "Tom1",
        address: "No. 189, Grove St, Los Angeles",
        flag: false
      },
    ],
    columnData: [
      {
        prop: "id",
        label: "ID",
        width: "",
      },
      {
        prop: "date",
        label: "date",
        width: "",
      },
      {
        prop: "name",
        label: "name",
        width: "",
      },
      {
        prop: "address",
        label: "address",
        width: "",
      },
    ],
  }
);
const tableData = props.tableData;
const columnData = props.columnData;

const emits = defineEmits(["fatherset","fatheredit","fatherdelete"])

const setflag = ( row: any) => {
  emits("fatherset",row)
}
const edit = ( row: User) => {
  emits("fatheredit",row)

}
const deletedata = ( row: User) => {
  emits("fatherdelete",row)

}
</script>
<style scoped>
.tabbapp{
  position:relative;
  padding: 0 20px;
}
.heacol{
  position: absolute;
  top: 0px;
  width: 17px;height: 39px;
  background-color: aliceblue;
  z-index: 1000;
}
.heacol div{
  width: 17px;height: 39px;
  background-color: #D8DBE2;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  z-index: 1000;
}
.left{
  left: 20;
}
.right{
  right: 20px;
}
.right div{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
p{
  line-height: 30px;
}
p img{
  width: 29px;
	height: 16px;
  position: relative;
  top: 4px;
  cursor: pointer;
  margin-right: 5px;
}
.editdelete{
  width: 25px;height: 25px;
  cursor: pointer;
  float: left;
  position: relative;
  top: 0px;
}
</style>
